<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border</title>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            display: flex;
            background: yellowgreen;
        }

        div {
            position: relative;
            margin: auto;
            width: 200px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            overflow: hidden;


        }

        div::after {
            content: "Hover Me";
            position: absolute;
            top: 4px;
            bottom: 4px;
            right: 4px;
            left: 4px;
            line-height: 92px;
            font-size: 24px;
            background: #fff;
            /* // border-radius: 50%; */
            border: 2px solid yellowgreen;
            cursor: pointer;
            color: yellowgreen;
        }

        div::before {
            content: "";
            position: absolute;
            top: 0px;
            bottom: 0px;
            right: -20px;
            left: 0px;
            background: #fff;
            /* border-radius: 50%; */
            transform: rotateZ(-90deg) translate(-100%, -100%);
            transform-origin: top left;
            transition: transform .3s;
            transition-timing-function: linear;
        }

        div:hover {
            filter: contrast(1.2);
        }

        div:hover::before {
            transform: rotateZ(0deg) translate(0%, -0%);
        }

        div:nth-child(2) {
            overflow: unset;


        }

        div::after {
            content: "";
        }

        div:nth-child(1):hover~div:nth-child(2)::before {
            transform: rotateZ(0deg) translate(0%, -0%);
        }
    </style>
</head>

<body>
    <!-- 两个核心点：

我们利用 overflow: hidden，把原本在容器外的一整个元素隐藏了起来
利用了 transform-origin，控制了元素的旋转中心
其实几乎大部分的有意思的 CSS 效果，都是运用了类似技巧：

简单的说就是，我们看到的动画只是原本现象的一小部分，通过特定的裁剪、透明度的变化、遮罩等，让我们最后只看到了原本现象的一部分。 -->
    <div>Hover Me</div>
    <div>Hover Me</div>
</body>

</html>